<template>
  <div>
    <el-dialog
      :title="!addForm.id ? '新增' : '分组列表'"
      :close-on-click-modal="false"
      :visible.sync="innerVisible"
      append-to-body
      @close="close"
      width="90%"
    >
      <el-card class="box-card">
        <el-form
          :inline="true"
          :model="dataForm"
          class="dadeFrom"
          @keyup.enter.native="searchNative"
        >
          <el-input
            v-model="dataForm.unitStaffAcc"
            placeholder="推送人员工号"
            style="width: 200px"
            clearable
          ></el-input>

          <el-button @click="searchData()" type="primary">查询</el-button>
          <el-button @click="handleReset()" type="primary">重置</el-button>
        </el-form>
      </el-card>
      <div style="margin-top: 20px">
        <el-button type="success" size="mini" @click="hanlleAddGroup()"
          >新增</el-button
        >
        <el-button type="danger" size="mini" @click="handleDelete()"
          >批量删除</el-button
        >
        <el-button type="success" size="mini" @click="handleshangchuan()"
          >EXCEL上传</el-button
        >
        <el-dialog
          title="上传文件"
          :visible.sync="fileUploadVisible"
          :close-on-click-modal="false"
          class="edit-form"
          :before-close="handleClose"
          @close="rightDuanbi"
          width="40%"
          append-to-body
        >
          <el-form label-width="100px">
            <el-form-item>
              <el-upload
                drag
                accept=".pdf, .doc, .docx, .xls, .xlsx"
                class="upload-demo"
                ref="uploadIcon"
                :limit="limitNum"
                :auto-upload="false"
                :action="iconAction"
                :on-exceed="exceedFile"
                :on-change="fileChange"
                :on-remove="handleRemove"
                :on-preview="handlePreview"
                :on-success="handleSuccessIcon"
                :on-error="handleErrorIcon"
                :file-list="fileList"
                :data="iconFileData"
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或<em>点击上传</em>
                </div>
                <!-- <div class="el-upload__tip" slot="tip">
              上传文件只能是 pdf、doc、docx、xls、xlsx格式，且不超过10M
            </div> -->
              </el-upload>
              <el-button
                size="small"
                type="primary"
                @click="IcuoUploadFile"
                style="margin-left: 140px"
                >确认提交</el-button
              >
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click.native="handleCancel()">取消</el-button>
            <!-- <el-button type="primary" @click.native="handleUploadFile()"
          >提交</el-button
        > -->
          </div>
        </el-dialog>
        <el-button @click="downLoadXiazai()" size="mini" type="primary"
          >模板下载</el-button
        >
      </div>
      <el-table
        :data="groupDataList"
        style="width: 100%; margin-top: 20px"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column type="index" label="序号" align="center">
        </el-table-column>
        <el-table-column prop="latn" label="地市" align="center">
        </el-table-column>
        <!-- <el-table-column prop="latn" label="地市" align="center">
        </el-table-column> -->
        <el-table-column
          prop="threeUnit"
          label="三级单元"
          align="center"
          v-if="
            this.unitType === '3' ||
            this.unitType === '4' ||
            this.unitType === '5'
          "
        >
        </el-table-column>
        <el-table-column
          prop="threeUnitId"
          label="三级单元ID"
          align="center"
          v-if="
            this.unitType === '3' ||
            this.unitType === '4' ||
            this.unitType === '5'
          "
        >
        </el-table-column>
        <el-table-column
          prop="fourUnit"
          label="四级单元"
          align="center"
          v-if="this.unitType === '5' || this.unitType === '4'"
        >
        </el-table-column>
        <el-table-column
          prop="fourUnitId"
          label="四级单元ID"
          align="center"
          v-if="this.unitType === '5' || this.unitType === '4'"
        >
        </el-table-column>
        <el-table-column
          prop="fiveUnit"
          label="五级单元"
          align="center"
          v-if="this.unitType === '5'"
        >
        </el-table-column>
        <el-table-column
          prop="fiveUnitId"
          label="五级单元ID"
          align="center"
          v-if="this.unitType === '5'"
        >
        </el-table-column>
        <el-table-column prop="unitType" label="单元类别" align="center">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center">
        </el-table-column>
        <el-table-column
          prop="pushAcc"
          label="推送人员工号"
          align="center"
          :render-header="renderHeader"
        >
          <template slot-scope="scope">
            <div>
              <span>{{ scope.row.pushAcc }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="pushName"
          label="推送人员姓名"
          align="center"
          :render-header="renderHeader"
        >
          <template slot-scope="scope">
            <div>
              <span>{{ scope.row.pushName }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              @click="hanlleAddGroup(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              size="small"
              @click="handleDelete(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <Pagination
        :total="totalG"
        :pageNum="pageNumG"
        :pageSize="pageSizeG"
        @pageChange="pageChangeG"
      />
    </el-dialog>
    <!-- 内层弹框 新增和编辑 -->
    <el-dialog
      :title="!addorUpForm.id ? '新增' : '编辑'"
      :close-on-click-modal="false"
      :visible.sync="innerVisibleAdd"
      append-to-body
      @close="closeAdd('addorUpForm')"
      width="30%"
    >
      <el-form
        :model="addorUpForm"
        :rules="rules"
        ref="addorUpForm"
        label-width="140px"
        class="demo-ruleForm"
      >
        <el-form-item label="单元类别名称" prop="unitType">
          <el-select
            v-model="addorUpForm.unitType"
            placeholder="请选择"
            style="width: 260px"
            :disabled="disabled"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="三级单元"
          prop="threeUnit"
          v-if="
            addorUpForm.unitType === '3' ||
            addorUpForm.unitType === '4' ||
            addorUpForm.unitType === '5'
          "
        >
          <el-input
            v-model="addorUpForm.threeUnit"
            style="width: 260px"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="三级单元ID"
          prop="threeUnitId"
          v-if="
            addorUpForm.unitType === '3' ||
            addorUpForm.unitType === '4' ||
            addorUpForm.unitType === '5'
          "
        >
          <el-input
            v-model="addorUpForm.threeUnitId"
            style="width: 260px"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="四级单元"
          prop="fourUnit"
          v-if="addorUpForm.unitType === '4' || addorUpForm.unitType === '5'"
        >
          <el-input
            v-model="addorUpForm.fourUnit"
            style="width: 260px"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="四级单元ID"
          prop="fourUnitId"
          v-if="addorUpForm.unitType === '4' || addorUpForm.unitType === '5'"
        >
          <el-input
            v-model="addorUpForm.fourUnitId"
            style="width: 260px"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="五级单元"
          prop="fiveUnit"
          v-if="addorUpForm.unitType === '5'"
        >
          <el-input
            v-model="addorUpForm.fiveUnit"
            style="width: 260px"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="五级单元ID"
          prop="fiveUnitId"
          v-if="addorUpForm.unitType === '5'"
        >
          <el-input
            v-model="addorUpForm.fiveUnitId"
            style="width: 260px"
          ></el-input>
        </el-form-item>
        <div v-if="addorUpForm.unitType === '2'">
          <el-form-item label="二级推送人员工号" prop="pushAcc">
            <el-input
              v-model="addorUpForm.pushAcc"
              style="width: 260px"
            ></el-input>
          </el-form-item>
          <el-form-item label="二级推送人员姓名" prop="pushName">
            <el-input
              v-model="addorUpForm.pushName"
              style="width: 260px"
            ></el-input>
          </el-form-item>
        </div>
        <div v-if="addorUpForm.unitType === '3'">
          <el-form-item label="三级推送人员工号" prop="pushAcc">
            <el-input
              v-model="addorUpForm.pushAcc"
              style="width: 260px"
            ></el-input>
          </el-form-item>
          <el-form-item label="三级推送人员姓名" prop="pushName">
            <el-input
              v-model="addorUpForm.pushName"
              style="width: 260px"
            ></el-input>
          </el-form-item>
        </div>
        <div v-if="addorUpForm.unitType === '4'" prop="pushAcc">
          <el-form-item label="四级推送人员工号" prop="pushName">
            <el-input
              v-model="addorUpForm.pushAcc"
              style="width: 260px"
            ></el-input>
          </el-form-item>
          <el-form-item label="四级推送人员姓名">
            <el-input
              v-model="addorUpForm.pushName"
              style="width: 260px"
            ></el-input>
          </el-form-item>
        </div>
        <div v-if="addorUpForm.unitType === '5'">
          <el-form-item label="五级推送人员工号" prop="pushAcc">
            <el-input
              v-model="addorUpForm.pushAcc"
              style="width: 260px"
            ></el-input>
          </el-form-item>
          <el-form-item label="五级推送人员姓名" prop="pushName">
            <el-input
              v-model="addorUpForm.pushName"
              style="width: 260px"
            ></el-input>
          </el-form-item>
        </div>
        <el-form-item>
          <el-button type="primary" @click="submitForm('addorUpForm')"
            >立即创建</el-button
          >
          <el-button @click="resetForm()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 分组列表，页面位置，不是点击人员配置出现的 -->
    <el-dialog
      title="新增"
      :close-on-click-modal="false"
      :visible.sync="innerVisibleShow"
      append-to-body
      @close="closeAddShow('addorUpForm')"
      width="30%"
    >
      <el-form
        :model="addorUpForm"
        :rules="rules"
        ref="addorUpForm"
        label-width="140px"
        class="demo-ruleForm"
      >
        <el-form-item label="单元类别名称" prop="unitType">
          <el-select
            v-model="addorUpForm.unitType"
            placeholder="请选择"
            style="width: 260px"
            @change="choiceUnType(addorUpForm.unitType)"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="三级单元"
          prop="threeUnit"
          v-if="
            addorUpForm.unitType === '3' ||
            addorUpForm.unitType === '4' ||
            addorUpForm.unitType === '5'
          "
        >
          <el-input
            v-model="addorUpForm.threeUnit"
            style="width: 260px"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="三级单元ID"
          prop="threeUnitId"
          v-if="
            addorUpForm.unitType === '3' ||
            addorUpForm.unitType === '4' ||
            addorUpForm.unitType === '5'
          "
        >
          <el-input
            v-model="addorUpForm.threeUnitId"
            style="width: 260px"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="四级单元"
          prop="fourUnit"
          v-if="addorUpForm.unitType === '4' || addorUpForm.unitType === '5'"
        >
          <el-input
            v-model="addorUpForm.fourUnit"
            style="width: 260px"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="四级单元ID"
          prop="fourUnitId"
          v-if="addorUpForm.unitType === '4' || addorUpForm.unitType === '5'"
        >
          <el-input
            v-model="addorUpForm.fourUnitId"
            style="width: 260px"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="五级单元"
          prop="fiveUnit"
          v-if="addorUpForm.unitType === '5'"
        >
          <el-input
            v-model="addorUpForm.fiveUnit"
            style="width: 260px"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="五级单元ID"
          prop="fiveUnitId"
          v-if="addorUpForm.unitType === '5'"
        >
          <el-input
            v-model="addorUpForm.fiveUnitId"
            style="width: 260px"
          ></el-input>
        </el-form-item>
        <div v-if="addorUpForm.unitType === '2'">
          <el-form-item label="二级推送人员工号" prop="pushAcc">
            <el-input
              v-model="addorUpForm.pushAcc"
              style="width: 260px"
            ></el-input>
          </el-form-item>
          <el-form-item label="二级推送人员姓名" prop="pushName">
            <el-input
              v-model="addorUpForm.pushName"
              style="width: 260px"
            ></el-input>
          </el-form-item>
        </div>
        <div v-if="addorUpForm.unitType === '3'">
          <el-form-item label="三级推送人员工号" prop="pushAcc">
            <el-input
              v-model="addorUpForm.pushAcc"
              style="width: 260px"
            ></el-input>
          </el-form-item>
          <el-form-item label="三级推送人员姓名" prop="pushName">
            <el-input
              v-model="addorUpForm.pushName"
              style="width: 260px"
            ></el-input>
          </el-form-item>
        </div>
        <div v-if="addorUpForm.unitType === '4'">
          <el-form-item label="四级推送人员工号" prop="pushAcc">
            <el-input
              v-model="addorUpForm.pushAcc"
              style="width: 260px"
            ></el-input>
          </el-form-item>
          <el-form-item label="四级推送人员姓名" prop="pushName">
            <el-input
              v-model="addorUpForm.pushName"
              style="width: 260px"
            ></el-input>
          </el-form-item>
        </div>
        <div v-if="addorUpForm.unitType === '5'">
          <el-form-item label="五级推送人员工号" prop="pushAcc">
            <el-input
              v-model="addorUpForm.pushAcc"
              style="width: 260px"
            ></el-input>
          </el-form-item>
          <el-form-item label="五级推送人员姓名" prop="pushName">
            <el-input
              v-model="addorUpForm.pushName"
              style="width: 260px"
            ></el-input>
          </el-form-item>
        </div>
        <el-form-item>
          <el-button type="primary" @click="submitFormShow('addorUpForm')"
            >立即创建</el-button
          >
          <el-button @click="resetFormShow()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import person from "../configuration/pushPersonnel.vue";
export default {
  data() {
    return {
      disabled: false,
      dialogVisible: false,
      innerVisible: false,
      innerVisibleAdd: false, //内层弹框
      innerVisibleShow: false, //外层弹框
      fileUploadVisible: false,
      iconAction: "", //文件上传的接口

      fileList: [], // excel文件列表
      limitNum: 1, // 上传excell时，同时允许上传的最大数
      action: "",
      actionUp: "",

      iconFileData: {
        //文件上传所需要的参数
        file: "",
        unitType: "",
      },
      pageNum: 1,
      pageSize: 10,
      total: 0,
      addorUpForm: {
        id: 0,
        unitType: "2",
        name: "",
        fiveUnit: "", //五级单元
        fiveUnitId: "", //五级单元id
        fourUnit: "", //四级单元
        fourUnitId: "", //四级单元id
        threeUnit: "", //三级单元
        threeUnitId: "", //三级单元id
        pushAcc: "", //推送人员工号
        pushName: "", //推送人员姓名
        latnId: "", //地市code
      },
      addForm: {
        groupId: "",
        id: 0,
        field: "",
        fieldValue: "",
        staffName: "",
        staffAccount: "",
      },
      dataForm: {
        title: "", //标题
        userKeyword: "", //关键字
        createTime: "", //创建时间
        staffAccount: "", //推送人员工号
        unitStaffAcc: "", //推送人员工号(人员配置弹框模糊查询使用)
        FieldValue: "", //推送人员架构名称
      },
      ids: [],
      dataList: [],
      groupDataList: [], //分组列表
      pageNumG: 1,
      pageSizeG: 10,
      totalG: 0,
      unitType: "", //单元类别
      data: {}, //点击查看的数据
      options: [
        {
          value: "2",
          label: "二级单元",
        },
        {
          value: "3",
          label: "三级单元",
        },
        {
          value: "4",
          label: "四级单元",
        },
        {
          value: "5",
          label: "五级单元",
        },
      ],
      value: "",
      value2: "",
      selectShow: false, //模板下载下拉框显隐
      selectShowT: false, //模板导入下拉框显隐
      uploadShowT: false,
      dataRule: {
        field: [{ required: true, message: "字段不能为空", trigger: "blur" }],
        fieldValue: [
          { required: true, message: "字段值不能为空", trigger: "blur" },
        ],
        staffName: [
          { required: true, message: "推送人不能为空", trigger: "blur" },
        ],
        staffAccount: [
          { required: true, message: "推送人工号不能为空", trigger: "blur" },
        ],
      },
      rules: {
        unitType: [
          { required: true, message: "请选择单元类别名称", trigger: "change" },
        ],
        pushAcc: [
          { required: true, message: "推送人工号不能为空", trigger: "blur" },
        ],
        pushName: [
          { required: true, message: "推送人姓名不能为空", trigger: "blur" },
        ],
        threeUnit: [
          { required: true, message: "三级单元名称不能为空", trigger: "blur" },
        ],
        threeUnitId: [
          { required: true, message: "三级单元ID不能为空", trigger: "blur" },
        ],
        fourUnit: [
          { required: true, message: "四级单元名称不能为空", trigger: "blur" },
        ],
        fourUnitId: [
          { required: true, message: "四级单元ID不能为空", trigger: "blur" },
        ],
        fiveUnit: [
          { required: true, message: "五级单元名称不能为空", trigger: "blur" },
        ],

        fiveUnitId: [
          { required: true, message: "五级单元ID不能为空", trigger: "blur" },
        ],
      },
    };
  },
  components: {
    person,
  },
  computed: {
    groupId: {
      get() {
        return this.$store.state.user.groupId;
      },
    },
    cityCode: {
      get() {
        return this.$store.state.user.cityId;
      },
      set(val) {
        this.$store.commit("user/updateCityCode", val);
      },
    },
  },
  activated() {},
  created() {
    this.actionUp = this.$http.adornUrl(
      `staffConfig/importDate?token=${this.$cookie.get("token")}`
    );
    this.iconAction = this.$http.adornUrl(
      `unitStaff/unitImport/?token=${this.$cookie.get("token")}`
    );
    // alert(this.actionUp)
    this.getPerson();
  },
  watch: {
    innerVisible(newVal, oldVal) {
      if (newVal === false) {
        // console.log("innerVisible-innerVisible");
        this.dataForm.unitStaffAcc = "";
      }
    },
  },
  methods: {
    //人员配置列表
    getPerson() {
      this.dialogVisible = true;
      this.selectShowT = false;
      this.selectShow = false;
      // console.log("id", id);
      //   this.addForm.groupId = this.groupId;
      //   this.iconFileData.groupId = this.groupId;
      //   console.log("this.addForm.groupId", this.addForm.groupId);
      //   console.log("this.iconFileData.groupId", this.iconFileData.groupId);
      //   console.log(
      //     "this.iconFileData.groupId",
      //     typeof this.iconFileData.groupId
      //   );
      //列表(点击人员选择)
      this.$http({
        url: this.$http.adornUrl(`unitStaff/groupList`),
        method: "get",
        params: this.$http.adornParams({
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          latnId: this.cityCode,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.page.records;
          this.total = data.page.total;
        } else {
          this.$message.error(data.msg);
        }
      });
    },

    //右上角叉号事件
    close() {
      this.addForm = {};
      //   this.$refs.addForm.clearValidate();
    },

    // 分页（点击人员选择）
    pageChange(page) {
      console.log(page._pageSize);
      console.log(page._currentPage);
      this.pageSize = page._pageSize;
      this.pageNum = page._currentPage;
      this.getPerson();
    },
    // 分页(分组列表)
    pageChangeG(page) {
      console.log(page._pageSize);
      console.log(page._currentPage);
      this.pageSizeG = page._pageSize;
      this.pageNumG = page._currentPage;
      //   this.getPersonG();
      this.hanlleSearch(this.data); //之间是查看的按钮
    },
    // 点击搜索
    searchData() {
      this.pageNumG = 1;
      this.hanlleSearch(this.data);
    },
    searchNative() {
      this.searchData();
    },
    //查看
    hanlleSearch(data) {
      this.data = data;
      this.innerVisible = true;
      console.log("data", data);
      this.unitType = data.unitType;
      this.addForm.id = data || 0;
      console.log("this.addForm.id", this.addForm.id);
      this.visible = true;
      this.$http({
        url: this.$http.adornUrl(`unitStaff/groupInfo`),
        method: "get",
        params: this.$http.adornParams({
          pageNum: this.pageNumG,
          pageSize: this.pageSizeG,
          latnId: data.latnId,
          unitType: data.unitType,
          unitStaffAcc: this.dataForm.unitStaffAcc,
        }),
      }).then(({ data }) => {
        console.log("--------------------", data);
        if (data && data.code === 0) {
          this.groupDataList = data.page.records;
          this.totalG = data.page.total;
        } else {
          this.$message.error(data.msg);
        }
      });
      //   if (this.addForm.id === 0) {
      //     this.addForm.groupId = this.groupId;
      //   } else {
      //     let obj = JSON.parse(JSON.stringify(data));
      //     console.log("obj", obj);
      //     (this.addForm.groupId = obj.groupId), (this.addForm.field = obj.field);
      //     this.addForm.fieldValue = obj.fieldValue;
      //     this.addForm.staffAccount = obj.staffAccount;
      //     this.addForm.staffName = obj.staffName;
      //   }
      //   console.log("this.addForm.groupId==", this.addForm.groupId);
    },
    //新增和编辑弹框(暂时不用了)
    hanlleAdd(data) {
      // console.log("row===",data.unitType);
      this.addorUpForm.id = data || 0;
      console.log("this.addorUpForm.id", this.addorUpForm.id);
      this.innerVisibleAdd = true;
      if (this.addorUpForm.id === 0) {
        this.addorUpForm.unitType = "";
      } else {
        let obj = JSON.parse(JSON.stringify(data));
        console.log("obj", obj);
        this.addorUpForm.unitType = obj.unitType;
      }
    },
    //内层弹框的新增和编辑
    submitForm(addorUpForm) {
      console.log(this.addorUpForm);
      let id = "";
      if (this.addorUpForm.id === 0) {
        id = "";
      } else {
        id = this.addorUpForm.id;
      }
      console.log("this.addorUpForm.id", this.addorUpForm.id);
      console.log("this.addorUpForm.id", this.addorUpForm);
      console.log("this.cityCode===", this.cityCode);
      // return
      this.$refs[addorUpForm].validate((valid) => {
        if (valid) {
          // return;
          this.$http({
            url: this.$http.adornUrl(
              `unitStaff/${!this.addorUpForm.id ? "save" : "update"}`
            ),
            method: "post",
            data: this.$http.adornData({
              id: this.addorUpForm.id,
              latnId: this.cityCode,
              pushAcc: this.addorUpForm.pushAcc,
              pushName: this.addorUpForm.pushName,
              unitType: this.addorUpForm.unitType,
              threeUnit: this.addorUpForm.threeUnit,
              threeUnitId: this.addorUpForm.threeUnitId,
              fourUnit: this.addorUpForm.fourUnit,
              fourUnitId: this.addorUpForm.fourUnitId,
              fiveUnit: this.addorUpForm.fiveUnit,
              fiveUnitId: this.addorUpForm.fiveUnitId,
            }),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.innerVisibleAdd = false;
                  this.hanlleSearch(this.data);
                  // this.$emit("refreshDataList");
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
    resetForm() {
      this.addorUpForm = {};
      this.innerVisibleAdd = false;
      // console.log("formName=",formName);
      // this.$refs[formName].resetFields();
    },
    //新增（外层使用）
    hanlleAddShow() {
      this.addorUpForm = {};
      // (this.addorUpForm.pushAcc = ""),
      //   (this.addorUpForm.pushName = ""),
      //   this.addorUpForm.unitType = "2",
      //   (this.addorUpForm.threeUnit = ""),
      //   (this.addorUpForm.threeUnitId = ""),
      //   (this.addorUpForm.fourUnit = ""),
      //   (this.addorUpForm.fourUnitId = ""),
      //   (this.addorUpForm.fiveUnit = ""),
      //   (this.addorUpForm.fiveUnitId = "");
      this.innerVisibleShow = true;
    },
    //立即创建（外层）
    submitFormShow(addorUpForm) {
      console.log("addorUpForm.unitType===", this.addorUpForm.unitType);
      console.log("this.addorUpForm", this.addorUpForm);
      console.log("this.cityCode===", this.cityCode);
      // return;
      this.$refs[addorUpForm].validate((valid) => {
        if (valid) {
          // return;
          this.$http({
            url: this.$http.adornUrl(`unitStaff/save`),
            method: "post",
            data: this.$http.adornData({
              latnId: this.cityCode,
              pushAcc: this.addorUpForm.pushAcc,
              pushName: this.addorUpForm.pushName,
              unitType: this.addorUpForm.unitType,
              threeUnit: this.addorUpForm.threeUnit,
              threeUnitId: this.addorUpForm.threeUnitId,
              fourUnit: this.addorUpForm.fourUnit,
              fourUnitId: this.addorUpForm.fourUnitId,
              fiveUnit: this.addorUpForm.fiveUnit,
              fiveUnitId: this.addorUpForm.fiveUnitId,
            }),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.innerVisibleShow = false;
                  // this.hanlleSearch(this.data);
                  // this.$emit("refreshDataList");
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
    //重置（外层）
    resetFormShow() {
      // this.$refs[formName].resetFields();
      this.addorUpForm = {};
      this.innerVisibleShow = false;
    },
    closeAdd(formName) {
      this.$refs[formName].resetFields();
    },
    closeAddShow(formName) {
      this.$refs[formName].resetFields();
    },
    //点击下拉框选项
    choiceUnType(value) {
      console.log("value==", value);
      this.addorUpForm.unitType = value;
      console.log("this.addorUpForm.unitType===", this.addorUpForm.unitType);
    },
    hanlleAddGroup(data) {
      this.innerVisibleAdd = true;
      this.addorUpForm.id = data || 0;
      console.log("this.addorUpForm.id", this.addorUpForm.id);
    //   this.innerVisibleAdd = true;
      if (this.addorUpForm.id === 0) {
        this.disabled = true;
        this.addorUpForm = {};
        console.log("==================", this.unitType);
        this.addorUpForm.unitType = this.unitType;
      } else {
        console.log("------------", this.addorUpForm.unitType);

        this.addorUpForm.unitType = this.unitType;
        console.log("11111111111111111111-", this.addorUpForm.unitType);
        this.disabled = true;
        let obj = JSON.parse(JSON.stringify(data));
        // console.log("obj", obj);
        // console.log("obj======", typeof obj.unitType);
        this.addorUpForm.unitType = obj.unitType.toString();
        console.log("3333333333333333333333333", this.addorUpForm.unitType);
        this.addorUpForm.fiveUnit = obj.fiveUnit;
        this.addorUpForm.fiveUnitId = obj.fiveUnitId;
        this.addorUpForm.fourUnit = obj.fourUnit;
        this.addorUpForm.fourUnitId = obj.fourUnitId;
        this.addorUpForm.threeUnit = obj.threeUnit;
        this.addorUpForm.threeUnitId = obj.threeUnitId;
        this.addorUpForm.pushAcc = obj.pushAcc;
        this.addorUpForm.pushName = obj.pushName;
        this.addorUpForm.latnId = obj.latnId;
        this.addorUpForm.id = obj.id;
      }
    },
    //重置
    handleReset() {
      this.dataForm.staffAccount = "";
      this.dataForm.FieldValue = "";
      this.dataForm.unitStaffAcc = "";
      this.hanlleSearch(this.data);
    },
    change(e) {
      this.$forceUpdate();
    },
    // 多选
    handleSelectionChange(val) {
      this.ids = [];
      val.map((item) => {
        this.ids.push(item.id);
      });
    },
    // 删除(人员配置里面的删除)
    handleDelete(id) {
      // let ids = [id];
      let ids = [];
      if (id) {
        ids = [id];
      } else {
        ids = this.ids;
        if (ids.length == 0) {
          this.$message.error("请先选择要删除的选项");
          return false;
        }
      }
      console.log(ids);
      // return
      this.$confirm(`您确定要删除吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("unitStaff/delete"),
            method: "post",
            data: this.$http.adornData({ ids: ids }),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.hanlleSearch(this.data);
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => {});
    },
    //删除（人员配置后面的删除）
    handleDeleteRen(latnId, unitType) {
      // alert(latnId);
      // alert(unitType);
      this.$confirm(`确定删除该单元下的所有人员?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("unitStaff/removeGroup"),
            method: "post",
            data: this.$http.adornData({
              latnId: latnId,
              unitType: parseInt(unitType),
            }),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.getPerson();
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => {});
    },
    //excel上传
    // 上传成功(热门文章)
    uploadSuccess(response, file, fileList) {
      console.log("11111111111", response);
      console.log("11111111111", file);
      console.log("11111111111", fileList);
      if (response.code === 500) {
        this.$message.error(response.msg);
      } else {
        this.$message.success("上传成功");
        this.getPerson();
      }
    },
    // 上传失败(热门文章)
    uploadError(response, file, fileList) {
      // console.log("2222222222222222");
      // console.log("2222222222222222", response);
      // console.log("2222222222222222", file);
      // console.log("2222222222222222", fileList);
      this.$message.error("上传失败，请联系管理员");
    },
    //模板下载
    downLoad() {
      this.selectShow = true;
    },
    selecetV(value) {
      console.log(value, "asdfasfdsd");
      // return
      this.action = this.$http.adornUrl(`staffConfig/downFile?type=${value}`);
      console.log(this.action, "ssss");
      window.open(this.action);
      this.selectShow = false;
    },
    downLoadXiazai() {
      this.action = this.$http.adornUrl(
        `staffConfig/downFile?type=${this.data.unitType}`
      );
      console.log(this.action, "ssss");
      window.open(this.action);
      this.selectShow = false;
    },
    handleUploadFile() {
      //   this.fileUploadVisible = true;
      this.selectShowT = true;
    },
    //上传按钮
    handleshangchuan() {
      this.fileUploadVisible = true;
      this.iconFileData.unitType = parseInt(this.data.unitType);
      console.log("sswww", this.iconFileData.unitType);
      
    },
    //上传,
    selecetVT(value2) {
      // console.log(value2, "111111");
      this.fileUploadVisible = true;
      this.iconFileData.unitType = parseInt(value2);
      console.log("sswww", this.iconFileData.unitType);
      // console.log("sswww",typeof this.iconFileData.unitType);
      // console.log("11111111111111",this.iconFileData);
    },
    // 文件超出个数限制时的钩子
    exceedFile(files, fileList) {
      this.$message.warning(
        `只能选择 ${this.limitNum} 个文件，当前共选择了 ${
          files.length + fileList.length
        } 个`
      );
    },
    // 文件状态改变时的钩子
    fileChange(file, fileList) {
      this.fileList = fileList;
      if (file.status === "success") {
        this.fileList = [];
      }
    },
    handleRemove(file, fileList) {
      this.fileList = [];
    },
    // 回单上传和下载开始
    handlePreview(file, fileList) {
      console.log("per", file, fileList);
    },
    // 文件上传成功时的钩子
    handleSuccessIcon(res, file) {
      this.fileList = [];
      console.log(res.msg);
      // console.log(file.name, "filefilefile");
      if (res.code === 500) {
        console.log("res.code === 500");
        this.$message({
          type: "error",
          message: res.msg,
          duration: 2500,
        });
      } else {
        this.iconFileData.file = file.name;
        console.log("this.iconFileData.file,,,,,", this.iconFileData.file);
        this.$message.success("数据导入成功");
        this.selectShowT = false;
        this.hanlleSearch(this.data);
        this.getPerson();
      }
    },
    // 文件上传失败时的钩子
    handleErrorIcon(err, file) {
      console.log("err=", err);
      console.log("file=", file);
      this.$message.error("文件上传失败");
    },
    //立即上传(点击icontub的上传)
    IcuoUploadFile() {
      console.log(this.fileList);
      if (this.fileList.length === 0) {
        this.$message.warning("请上传文件");
        return;
      }
      // this.$message({
      //     message: "文件正在上传",
      //     duration: 1200,
      //   });
      this.$refs.uploadIcon.submit();
      // this.getDispatchList();
      this.fileUploadVisible = false;
    //   this.hanlleSearch(this.data);
      // console.log("刷新了吗");
      this.getPerson();
    },
    //点击关闭dialog
    handleClose(done) {
      this.fileList = [];
      this.fileUploadVisible = false;
    },
    //点击取消
    handleCancel() {
      this.fileList = [];
      this.fileUploadVisible = false;
      this.$message({
        type: "info",
        message: "已取消",
      });
    },
    //弹出框右上角叉号事件
    rightDuanbi() {
      this.fileUploadVisible = false;
    },
    //渲染表头，换行

    //组件的method方法
    renderHeader(h, para) {
      console.log("this.unitType===", this.unitType);
      console.log("this.unitType===", typeof this.unitType);
      let unitTypeNmae = "";
      switch (this.unitType) {
        case "3":
          unitTypeNmae = "三级";
          break;
        case "4":
          unitTypeNmae = "四级";
          break;
        case "5":
          unitTypeNmae = "五级";
          break;
        default:
          unitTypeNmae = "二级";
      }
      //该列的绑定数据
      // console.log(para.column);
      //列号
      // console.log(para.$index);
      return h("span", [h("span", unitTypeNmae + para.column.label)]);
    },
  },
};
</script>

<style scoped>
.el-pagination {
  text-align: right;
}
</style>